import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { DropdownDirective, MenuItem } from '@iux/live';

@Component({
  templateUrl: './size.component.html',
  styles: [
    `
      .ui-dropdown-button {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .ui-dropdown-button lv-select-trigger-icon {
        margin-left: 8px;
      }

      ::ng-deep .lv-button.ui-dropdown-button .lv-icon-host {
        color: #808080;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SizeComponent implements OnInit {
  menus: MenuItem[];

  @ViewChild('lvDropdown', { static: false }) lvDropdown: DropdownDirective;
  @ViewChild('lvDropdownLarge', { static: false }) lvDropdownLarge: DropdownDirective;

  ngOnInit(): void {
    this.menus = this.getMenus();
  }

  getMenus(): MenuItem[] {
    return [
      {
        id: '1',
        label: 'MenuItem 01',
        items: [
          {
            id: '11',
            label: 'MenuItem 11',
          },
          {
            id: '12',
            label: 'MenuItem 12',
          },
        ],
      },
      {
        id: '2',
        label: 'MenuItem 02',
        divide: true,
        items: [
          {
            id: '21',
            label: 'MenuItem 21',
            items: [
              {
                id: '211',
                label: 'MenuItem 211',
              },
              {
                id: '212',
                label: 'MenuItem 212',
                divide: true,
              },
              {
                id: '213',
                label: 'MenuItem 213',
              },
            ],
          },
          {
            id: '22',
            label: 'MenuItem 22',
          },
        ],
      },
      {
        id: '3',
        label: 'MenuItem 03',
      },
      {
        id: '4',
        label: 'MenuItem 04',
      },
    ];
  }

  checkPanelState(dropdown: DropdownDirective): boolean {
    const animationState = dropdown?.dropdown?._animationState;
    return animationState?.includes('show');
  }
}
